<template>
  <div class="home">
    <div v-if="isLoading">
      <home-head></home-head>
      <home-swiper :banner="banner"></home-swiper>
      <home-icons :icons="icons"></home-icons>
      <p  class="hot">热销推荐</p>
      <home-hot :recommendList="recommendList"></home-hot>
      <p  class="hot">周末去哪</p>
      <home-weekend :weekendList="weekendList"></home-weekend>
    </div>
    <loading v-else></loading>
  </div>
</template>

<script>
import loading from "./home/components/loading";
import HomeHead from  './home/components/Head';
import HomeSwiper from './home/components/Swiper';
import HomeIcons  from "./home/components/Icons";
import HomeHot from "./home/components/hot";
import HomeWeekend from "./home/components/weekend";
import {HomeModel} from "../models/HomeModels";
const homeModel = new  HomeModel();
export default { 
  name: "home",
  components:{
    HomeHead,
    HomeSwiper,
    HomeIcons,
    HomeHot,
    HomeWeekend,
    loading
  },
  data(){
    return{
      banner:[],
      icons:[],
      recommendList:[],
      weekendList:[],
      currentCity:"",
      isLoading:false
    }
  },
  methods:{
    handleData(res){
      let data = res.data.data;
      let {banner,icons,recommendList,weekendList}=data;
      this.banner = banner;
      this.icons = icons;
      this.recommendList = recommendList;
      this.weekendList =weekendList ;
      this.isLoading = true;
    }
  },
  computed:{
    city(){
      return this.$store.state.city
    }
  },
  mounted(){
    this.currentCity = this.city;
    homeModel.getHome(this.city).then(res=>{
      this.handleData(res);
    })
  },
  /* 方法二，使用监听city */
  watch:{
    city(){
      homeModel.getHome(this.city).then(res=>{
        this.handleData(res);
      })
    }
  },
  activated(){ /* 专门对付keep-live 进入页面时触发*/
    /* if(this.currentCity != this.city){
        this.currentCity = this.city ;
        homeModel.getHome(this.city).then(res=>{
          this.handleData(res) ;
    })
    } */
  },
  deactivated(){    /* 出去的时候触发 */

  }
};
</script>
<style lang="scss" scoped>
.nav {
  width:375px;
  height: 40px;
  background: red;
}
.hot{
    background-color: #eee;
    height: 60px;
    padding: 24px 0px 0px 34px;
}
</style>
